<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院名称" prop="hospital_name">
              <el-input v-model="form.hospital_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择省份" prop="province_id">
              <el-select
                v-model="form.province_id"
                clearable
                @change="handleChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provincesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleResect">重置</el-button>
              <el-button type="primary" @click="toRoutes('addHospital','','add')">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column prop="hospital_name" label="医院名称" align="center" />
        <el-table-column prop="hospital_icon" label="医院图标" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="common.img_url+scope.row.hospital_icon" alt class="smallBG" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="province_cn" label="省份" align="center" width="120px" />
        <el-table-column prop="location_des" label="地址" align="center" width="100px" />
        <el-table-column prop="projectNums" label="关联项目" align="center" width="110px">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="linkProject(scope.row.id)"
            >{{scope.row.projectNums}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="doctorNums" label="关联医生" align="center" width="110px">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="linkDoctor(scope.row.id)"
            >{{scope.row.doctorNums}}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toRoutes('addHospital',scope.row.id,'edit')"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <el-pagination
          :current-page="form.page"
          :page-sizes="page_sizes"
          :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog title="关联项目" :visible.sync="dialogProjectVisible" width="600px">
      <div class="listDiv">
        <el-table v-loading="projectLoading" :data="tableProjectData" border style="width: 100%">
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
            :index="table_project_index"
          />
          <el-table-column prop="hospital_name" label="医院名称" align="center" />
          <el-table-column prop="project_id" label="项目ID" align="center" />
          <el-table-column prop="project_name" label="项目名称" align="center" />
          <el-table-column prop="province" label="省份" align="center" />
          <el-table-column prop="hospital_name" label="项目医院" align="center" />
        </el-table>
        <!-- 分页器 -->
        <div class="pagesCon">
          <el-pagination
            :current-page="form1.page"
            :page-sizes="[10,20,50,100]"
            :page-size="form1.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalProject"
            @current-change="change_project_page"
            @size-change="handleProjectSizeChange"
          />
        </div>
      </div>
    </el-dialog>
    <!-- 关联医生 -->
    <el-dialog title="关联医生" :visible.sync="dialogDoctorVisible" width="600px">
      <div class="listDiv"></div>
      <el-table v-loading="doctorLoading" :data="tableDoctorData" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_doctor_index"
        />
        <el-table-column prop="hospital_name" label="医院名称" align="center" />
        <el-table-column prop="doctor_name" label="医生名称" align="center" />
        <el-table-column prop="position" label="医生职位" align="center" />
      </el-table>
      <!-- 分页器 -->
      <div class="pagesCon">
        <el-pagination
          :current-page="form2.page"
          :page-sizes="[10,20,50,100]"
          :page-size="form2.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalDoctor"
          @current-change="change_doctor_page"
          @size-change="handleDoctorSizeChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  hospitalIndex,
  get_doctor_list,
  get_project_list
} from "@/api/cashOut";
export default {
  name: "hospitalList",
  data() {
    return {
      form: {
        hospial_name: "",
        province_id: "",
        page: 1,
        pageSize: 10
      },
      provincesList: [],
      tableData: [{}],
      tableLoading: true,
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
      dialogProjectVisible: false,
      projectLoading: true,
      dialogDoctorVisible: false,
      tableDoctorData: [],
      doctorLoading: true,
      tableProjectData: [],
      form1: {
        hospital_id: "",
        page: 1,
        pageSize: 10
      },
      form2: {
        hospital_id: "",
        page: 1,
        pageSize: 10
      },
      totalProject: 0,
      totalDoctor: 0
    };
  },
  mounted() {
    this.getList(this.form);
  },
  methods: {
    async getList(opt) {
      let { data: res } = await hospitalIndex(opt);
      if (res.status == 0) {
        this.tableLoading = false;
        this.tableData = res.data.list;
        this.page_totals = res.data.total;
        this.provincesList = res.data.provinceArray;
      } else {
        this.tableLoading = false;
        this.$message.error(res.message);
      }
    },
    table_index(index) {
      return (this.form.page - 1) * this.form.pageSize + index + 1;
    },
    table_project_index(index) {
      return (this.form1.page - 1) * this.form1.pageSize + index + 1;
    },
    table_doctor_index(index) {
      return (this.form2.page - 1) * this.form2.pageSize + index + 1;
    },
    toRoutes(name, id, type) {
      const route = { path: name, query: { id: id, type: type } };
      this.$router.push(route);
    },
    // 关联项目
    linkProject(id) {
      this.form1.hospital_id = id;
      this.dialogProjectVisible = true;
      this.getProject(this.form1);
    },
    // 关联项目
    async getProject(opt) {
      let { data: res } = await get_project_list(opt);
      // console.log("ress", res);
      if (res.status == 0) {
        this.projectLoading = false;
        this.tableProjectData = res.data.list;
        this.totalProject = res.data.total;
      } else {
        this.projectLoading = false;
        this.$message.error(res.message);
      }
    },
    // 关联医生
    linkDoctor(id) {
      this.form2.hospital_id = id;
      this.dialogDoctorVisible = true;
      this.getDoctorList(this.form2);
    },
    async getDoctorList(opt) {
      let { data: res } = await get_doctor_list(opt);
      if (res.status == 0) {
        this.doctorLoading = false;
        this.tableDoctorData = res.data.list;
        this.totalDoctor = res.data.total;
      } else {
        this.doctorLoading = false;
        this.$message.error(res.message);
      }
    },
    handleChange(e) {
      this.form.province_id = e;
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 重置
    handleResect() {
      this.form.hospial_name = "";
      this.form.province_id = "";
      this.getList(this.form);
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.size = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 关联项目
    change_project_page(val) {
      this.form1.page = val;
      this.getProject(this.form1);
    },
    handleProjectSizeChange(val) {
      this.form1.pageSize = val;
      this.getProject(this.form1);
    },
    change_doctor_page(val) {
      this.form2.page = val;
      this.getDoctorList(this.form2);
    },
    handleDoctorSizeChange(val) {
      this.form2.pageSize = val;
      this.getDoctorList(this.form2);
    }
  }
};
</script>

<style>
.smallBG {
  width: 50px;
  height: 50px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>